<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="fun(1)">设置红色</button>
    <button onclick="fun(2)">设置蓝色</button>
    <button onclick="fun(3)">设置灰色</button>
    <button onclick="fun(4)">设置黑色</button>
    <a href="./day2-dom.html" target="_blank">dom2</a>
    <a href="./day3-dom.html" target="_blank">dom3</a>
  </body>
  <script>
    //改变颜色
    // function fun(num) {
    //   localStorage.setItem('num', num)
    //   if (num == 1) {
    //     document.body.style = 'background:red'
    //   } else if (num == 2) {
    //     document.body.style = 'background:blue'
    //   } else if (num == 3) {
    //     document.body.style = 'background:#ccc'
    //   } else if (num == 4) {
    //     document.body.style = 'background:black'
    //   } else {
    //     localStorage.removeItem('num')
    //   }
    // }
    // window.onload = function () {
    //   var num = localStorage.getItem('num')
    //   fun(num)
    // }

    //改变颜色
    function fun(num) {
      sessionStorage.setItem('num', num)
      if (num == 1) {
        document.body.style = 'background:red'
      } else if (num == 2) {
        document.body.style = 'background:blue'
      } else if (num == 3) {
        document.body.style = 'background:#ccc'
      } else if (num == 4) {
        document.body.style = 'background:black'
      } else {
        sessionStorage.removeItem('num')
      }
    }
    window.onload = function () {
      var num = sessionStorage.getItem('num')
      fun(num)
    }
  </script>
</html>
